<!DOCTYPE html>
<html dir="ltr">

<head>
  <meta charset="UTF-8">
  <title>Segment</title>
  <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no">
  <link href="../../../../../css/ionic.bundle.css" rel="stylesheet">
  <link href="../../../../../scripts/testing/styles.css" rel="stylesheet">
  <script src="../../../../../scripts/testing/scripts.js"></script>
  <script src="../../../../../dist/ionic.js"></script>
</head>

<body onLoad="setLayout()">
  <ion-app>
    <ion-header>
      <ion-toolbar color="primary">
        <ion-title>Segment</ion-title>
      </ion-toolbar>

      <ion-toolbar color="primary">
        <ion-segment scrollable id="modeLayout">
          <ion-segment-button checked>
            <ion-icon name="compass"></ion-icon>
            <ion-label>Explore</ion-label>
          </ion-segment-button>
          <ion-segment-button>
            <ion-icon name="airplane"></ion-icon>
            <ion-label>Flights</ion-label>
          </ion-segment-button>
          <ion-segment-button>
            <ion-icon name="briefcase"></ion-icon>
            <ion-label>Trips</ion-label>
          </ion-segment-button>
          <ion-segment-button>
            <ion-icon name="person"></ion-icon>
            <ion-label>Account</ion-label>
          </ion-segment-button>
          <ion-segment-button>
            <ion-icon name="settings"></ion-icon>
            <ion-label>Settings</ion-label>
          </ion-segment-button>
        </ion-segment>
      </ion-toolbar>
    </ion-header>

    <ion-content>
      <!-- Label only -->
      <ion-segment>
        <ion-segment-button checked>
          <ion-label>Item One</ion-label>
        </ion-segment-button>
        <ion-segment-button>
          <ion-label>Item Two</ion-label>
        </ion-segment-button>
        <ion-segment-button>
          <ion-label>Item Three</ion-label>
        </ion-segment-button>
      </ion-segment>

      <!-- Icon only -->
      <ion-segment>
        <ion-segment-button>
          <ion-icon name="call"></ion-icon>
        </ion-segment-button>
        <ion-segment-button checked>
          <ion-icon name="heart"></ion-icon>
        </ion-segment-button>
        <ion-segment-button>
          <ion-icon name="pin"></ion-icon>
        </ion-segment-button>
      </ion-segment>

      <!-- Icon top -->
      <ion-segment>
        <ion-segment-button>
          <ion-label>Item One</ion-label>
          <ion-icon name="call"></ion-icon>
        </ion-segment-button>
        <ion-segment-button checked>
          <ion-label>Item Two</ion-label>
          <ion-icon name="heart"></ion-icon>
        </ion-segment-button>
        <ion-segment-button>
          <ion-label>Item Three</ion-label>
          <ion-icon name="pin"></ion-icon>
        </ion-segment-button>
      </ion-segment>

      <!-- Icon bottom -->
      <ion-segment>
        <ion-segment-button checked layout="icon-bottom">
          <ion-icon name="call"></ion-icon>
          <ion-label>Item One</ion-label>
        </ion-segment-button>
        <ion-segment-button layout="icon-bottom">
          <ion-icon name="heart"></ion-icon>
          <ion-label>Item Two</ion-label>
        </ion-segment-button>
        <ion-segment-button layout="icon-bottom">
          <ion-icon name="pin"></ion-icon>
          <ion-label>Item Three</ion-label>
        </ion-segment-button>
      </ion-segment>

      <!-- Icon start -->
      <ion-segment scrollable>
        <ion-segment-button checked layout="icon-start">
          <ion-label>Item One</ion-label>
          <ion-icon name="call"></ion-icon>
        </ion-segment-button>
        <ion-segment-button layout="icon-start">
          <ion-label>Item Two</ion-label>
          <ion-icon name="heart"></ion-icon>
        </ion-segment-button>
        <ion-segment-button layout="icon-start">
          <ion-label>Item Three</ion-label>
          <ion-icon name="pin"></ion-icon>
        </ion-segment-button>
      </ion-segment>

      <!-- Icon end -->
      <ion-segment scrollable>
        <ion-segment-button checked layout="icon-end">
          <ion-icon name="call"></ion-icon>
          <ion-label>Item One</ion-label>
        </ion-segment-button>
        <ion-segment-button disabled layout="icon-end">
          <ion-icon name="heart"></ion-icon>
          <ion-label>Item Two</ion-label>
        </ion-segment-button>
        <ion-segment-button layout="icon-end">
          <ion-icon name="pin"></ion-icon>
          <ion-label>Item Three</ion-label>
        </ion-segment-button>
      </ion-segment>

      <!-- Disabled -->
      <ion-segment scrollable disabled>
        <ion-segment-button checked layout="icon-end">
          <ion-icon name="call"></ion-icon>
          <ion-label>Item One</ion-label>
        </ion-segment-button>
        <ion-segment-button layout="icon-end">
          <ion-icon name="heart"></ion-icon>
          <ion-label>Item Two</ion-label>
        </ion-segment-button>
        <ion-segment-button layout="icon-end">
          <ion-icon name="pin"></ion-icon>
          <ion-label>Item Three</ion-label>
        </ion-segment-button>
      </ion-segment>

      <!-- Color -->
      <ion-segment scrollable color="secondary">
        <ion-segment-button checked layout="icon-end">
          <ion-icon name="call"></ion-icon>
          <ion-label>Item One</ion-label>
        </ion-segment-button>
        <ion-segment-button disabled layout="icon-end">
          <ion-icon name="heart"></ion-icon>
          <ion-label>Item Two</ion-label>
        </ion-segment-button>
        <ion-segment-button layout="icon-end">
          <ion-icon name="pin"></ion-icon>
          <ion-label>Item Three</ion-label>
        </ion-segment-button>
      </ion-segment>

      <!-- Overflow Icons -->
      <ion-segment scrollable color="tertiary">
        <ion-segment-button>
          <ion-icon name="home"></ion-icon>
        </ion-segment-button>
        <ion-segment-button checked>
          <ion-icon name="heart"></ion-icon>
        </ion-segment-button>
        <ion-segment-button>
          <ion-icon name="pin"></ion-icon>
        </ion-segment-button>
        <ion-segment-button>
          <ion-icon name="star"></ion-icon>
        </ion-segment-button>
        <ion-segment-button>
          <ion-icon name="call"></ion-icon>
        </ion-segment-button>
        <ion-segment-button>
          <ion-icon name="globe"></ion-icon>
        </ion-segment-button>
        <ion-segment-button>
          <ion-icon name="basket"></ion-icon>
        </ion-segment-button>
      </ion-segment>

    </ion-content>

    <style>
      ion-content {
        --background: #e5e5e5;
        --padding-top: 16px;
      }

      ion-content ion-segment {
        background: white;
        margin-bottom: 12px;
      }

    </style>

    <script>
      function setLayout() {
        var mode = Ionic.mode;

        var segment = document.getElementById("modeLayout");
        var segmentButtons = segment.querySelectorAll("ion-segment-button");

        for (var i = 0; i < segmentButtons.length; i++) {
          segmentButtons[i].layout = (mode === 'ios') ? 'icon-hide' : 'icon-top';
        }
      }

    </script>
  </ion-app>
</body>

</html>
